<template>
  <div class="">
    <div class="wrap">
      <ul class="nav">
        <li
          v-for="(item, index) in fenlei"
          :key="item._id"
          @click="change(index, item._id)"
          :class="{ active: flag == index }"
        >
          {{ item.title }}
        </li>
      </ul>
    </div>

    <list :list="res"></list>
  </div>
</template>

<script>
// import axios from "axios";
// 已经在全局引入所以就不用在局部引入
import list from "@/components/List";
//@指的是直接从src目录找

export default {
  data() {
    return {
      fenlei: [],
      //分类数据
      flag: -1,
      list: [],
      //全部的列表数据
      res: [],
      //保存筛选出来的数据
    };
  },
  mounted() {
    // axios.get("fenlei.json").then((res) => {
    //   this.fenlei = res.data.result;
    // });
    this.getdata();
    //一进入页面请求分类数据
    this.getlist();
  },
  methods: {
    getdata() {
      this.$axios
        .get("fenlei.json")
        .then((res) => {
          console.log(res);
          this.fenlei = res.data.result;
        })
        .catch((err) => {});
    },
    //获取分类数据
    getlist() {
      this.$axios.get("list.json").then((res) => {
        this.list = res.data.result;
        this.change(0, "59f1e1ada1da8b15d42234e9");
        //一进入页面 执行筛选方法，让页面有一个初始数据，我们要保证在拿到数据后才能进行筛选
      });
    },
    //获取商品列表数据

    change(i, id) {
      this.flag = i;
      // this.res = this.list.filter((item) => {
      //   return item.cid == id;
      // });
      this.res = [];
      this.list.forEach((item) => {
        if (item.cid == id) {
          this.res.push(item);
        }
      });
      //根据分类id  cid进行筛选
    },
  },
  components: {
    list,
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  overflow: scroll;
  //超出部分出现滚动条
}
.nav {
  display: flex;
  li {
    width: 100px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border: 1px solid #ccc;
    //让成员不缩小
  }
  .active {
    border-bottom: 3px solid red;
  }
}
</style>
